<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考试练习</title>
		<style type="text/css">
			.title {
				width: 70%;
				margin: 5px auto;
				height: 100px;
				top: 20px;
				position: relative;
			}

			.left-1 {
				width: 20%;
				height: 80px;
				margin-right: 50px;
				float: left;
			}

			.left-1 img {
				vertical-align: middle;
				width: 100%;
				height: 80%;
			}

			.right-1 {
				float: left;
				width: 70%;
				height: 100px;
				vertical-align: middle;
			}

			.parent {
				width: 100%;
				height: 42px;
				top: 20px;
				position: relative;
			}

			.parent>input:first-of-type {
				width: 450px;
				height: 35px;
				border: 1px solid #ccc;
				font-size: 16px;
				outline: none;
			}

			.parent>input:first-of-type:focus {
				border: 1px solid #317ef3;
				padding-left: 10px;
			}

			.parent>input:last-of-type {
				width: 100px;
				height: 39px;
				position: absolute;
				background: #317ef3;
				border: 1px solid #317ef3;
				color: #fff;
				font-size: 16px;
				outline: none;
			}

			nav {
				height: 30px;
				background-color: #00008B;
			}

			.container {
				width: 90%;
				height: 100%;
				margin: 0 auto;
			}

			.container a {
				display: block;
				float: left;
				color: white;
				background-color: #00008B;
				height: 30px;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				width: 6%;
				font-size: 10px;
			}

			.container a:hover {
				background-color: red;
			}

			.container img {
				width: 30px;
				height: 30px;
				vertical-align: middle;
			}

			.main {
				width: 95%;
				height: 400px;
				margin: 10px 10px 10px 30px;
				float: right;
			}

			.left-2 {
				width: 45%;
				height: 400px;
				float: left;
				margin-right: 10px;
			}

			li>span {
				font-size: 20px;
				font-weight: 800;
			}

			.right-2 {
				width: 480px;
				height: 270px;
				margin: 20px 20px;
				float: left;
			}

			.right-2 img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<div class="left-1">
				<img src="./images/logo_news.png" <!-- width="200xp" height="80px" -->
			</div>
			<div class="right-1">
				<form action="" class="parent">
					<input type="text">
					<input type="button" value="百度一下">
				</form>
				<br />
				<input type="radio" name="xinwen" value="xinwenquanwen">新闻全文
				<input type="radio" name="xinwen" value="xinwenbiaoti">新闻标题
				</form>
			</div>
		</div>

		<nav>
			<div class="container">
				<a href="#"><img src="./images/home.png" /><strong>首页</strong></a>
				<a href="#"><strong>百家号</strong></a>
				<a href="#"><strong>国内</strong></a>
				<a href="#"><strong>国际</strong></a>
				<a href="#"><strong>军事</strong></a>
				<a href="#"><strong>社会</strong></a>
				<a href="#"><strong>财经</strong></a>
				<a href="#"><strong>娱乐</strong></a>
				<a href="#"><strong>体育</strong></a>
				<a href="#"><strong>互联网</strong></a>
				<a href="#"><strong>科技</strong></a>
				<a href="#"><strong>游戏</strong></a>
				<a href="#"><strong>时尚</strong></a>
				<a href="#"><strong>女人</strong></a>
				<a href="#"><strong>汽车</strong></a>
				<a href="#"><strong>个性推荐</strong></a>
			</div>
		</nav>

		<div class="main">
			<div class="left-2">
				<ul>
					<p>
						<li>
							<span>习近平给孩子们描绘的“童心圆”</span><br />
							<small>近平style 习近平赞屈原 民族精神为中国梦塑心聚力 砥砺奋进的五年</small>
						</li>
					</p>
					<p>
						<li>
							<span>李克强访问欧三大“看点”值得期待 专题</span><br />
							<small>李克强再晤默克尔 【镜头中的脱贫故事】像太阳要增收 刘云山</small>
						</li>
					</p>
					<p>
						<li>
							<span>一批新规今起施行：出售个人信息超过50条将入罪</span><br />
							<small>人肉搜索视情节可获刑3年 8月底前需完成无人机实名登记注册</small>
						</li>
					</p>
					<p>
						<li>
							<span>停止有偿服务后 军队医院还给老百姓看病吗？</span><br />
							<small>·广东省原副省长刘志庚受贿案一审被判无期徒刑</small>
						</li>
					</p>

				</ul>
			</div>
			<div class="right-2">
				<img src="./images/img.jpg" />
			</div>
		</div>
	</body>
</html>
